<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="list">
        <!-- html5中自定义属性的命名规范: data-最为前缀; 如果自定义属性名为多个英文单词,采用-连接的方式, 并且全部消息 -->
        <li data-index="1" data-bg-color="red">1</li>
        <li data-index="2" data-bg-color="green">2</li>
        <li data-index="3" data-bg-color="blue">3</li>
    </ul>
    <script>
        var lis = document.querySelectorAll('.list li')
        lis.forEach(function (li,index) {
            // dataset属性中保存了所有data-开头的自定义属性
            console.log(li.dataset);
            // 读取自定义属性:
            li.style.background=li.dataset.bgColor
            // 设置自定义属性:不需要书写data-前缀, 会自动添加  data-num="1"
            li.dataset.num=index
        })
    </script>
</body>

</html>